<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>作用域插槽</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>


<body>
    <div id="app">

        <h3>作用域插槽</h3>

        <hr/>

        <my-list :books="books">
            <!-- 这里的props只是一个临时变量，template 内可以通过临时变量 props 访问来自子组件插槽的数据 msg -->
            <template slot="book" scope="props">
                <li>{{props.bookName}}</li>
            </template>
        </my-list>

    </div>
</body>

<script type="text/javascript">
    // 注册组件
    Vue.component('my-list', {
        props:{
            books:{
                type: Array,
                default: function(){
                    return [];
                }
            }
        },
        template: '<ul>\
                        <slot name="book" v-for="book in books" :book-name="book.name"></slot>\
                   </ul>'
    });

    // Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
    var vm = new Vue({
        el: "#app",
        data: {
            books: [
                {name:'《Vue.js 实战》'},
                {name:'《Css 实战》'},
                {name:'《JavaScript 实战》'}
            ]
        }
    })
</script>

</html>